<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            <tr> -->

        </tbody>
    </table>

    <script>

        var data = [
            ['张三1', '女', '20', '打篮球'],
            ['张三2', '女', '20', '打篮球'],
            ['张三3', '女', '20', '打篮球'],
            ['张三4', '女', '20', '打篮球']
        ];


        // 渲染页面
        var res = '';
        for (var i = 0; i < data.length; i++) {
            res += '<tr>';
            for (var j = 0; j < data[i].length; j++) {
                res += `<td>${data[i][j]}</td>`;
            }
            res += '</tr>';
        }


        // 放到tbody中
        var oT = document.querySelector('tbody');
        console.log(oT);  // 标签没有获取成功 的时候   null   空对象
        oT.innerHTML = res;

    </script>

</body>

</html>